<template>
  <div class="panel-wrap">
    <template v-if="showText">
      <div class="panel-title">文本</div>
      <a-row align="middle">
        <a-col :span="8">文本框宽</a-col>
        <a-col :span="14">
          <a-input-number
            :min="10"
            :max="999"
            style="width: 100%"
            :precision="0"
            :value="globalGridAttr.nodeWidth"
            @change="onNodeWidthChange"
          ></a-input-number>
        </a-col>
      </a-row>
      <a-row align="middle" v-if="showHeight">
        <a-col :span="8">文本框高</a-col>
        <a-col :span="14">
          <a-input-number
            :min="10"
            :max="999"
            style="width: 100%"
            :precision="0"
            :value="globalGridAttr.nodeHeight"
            @change="onNodeHeightChange"
          ></a-input-number>
        </a-col>
      </a-row>
      <a-row align="middle">
        <a-col :span="8">旋转</a-col>
        <a-col :span="12">
          <a-slider
            :min="0"
            :max="360"
            :marks="marks"
            :step="5"
            :value="globalGridAttr.nodeAngle"
            @change="onNodeAngleChange"
          />
        </a-col>
        <a-col :span="2">
          <div class="result">{{ globalGridAttr.nodeAngle }}</div>
        </a-col>
      </a-row>
      <a-row align="middle">
        <a-col :span="8">字体大小</a-col>
        <a-col :span="12">
          <a-slider :min="8" :max="16" :step="1" :value="globalGridAttr.nodeFontSize" @change="onFontSizeChange" />
        </a-col>
        <a-col :span="2">
          <div class="result">{{ globalGridAttr.nodeFontSize }}</div>
        </a-col>
      </a-row>
      <a-row align="middle">
        <a-col :span="8">字体颜色</a-col>
        <a-col :span="14">
          <c-color-picker :value="globalGridAttr.nodeFontColor" @change="onColorChange" />
        </a-col>
      </a-row>
    </template>
    <template v-else>
      <div class="panel-title">节点</div>
      <a-row align="middle">
        <a-col :span="6">旋转</a-col>
        <a-col :span="14">
          <a-slider
            :min="0"
            :max="360"
            :marks="marks"
            :step="5"
            :value="globalGridAttr.nodeAngle"
            @change="onNodeAngleChange"
          />
        </a-col>
        <a-col :span="2">
          <div class="result">{{ globalGridAttr.nodeAngle }}</div>
        </a-col>
      </a-row>
      <a-row align="middle">
        <a-col :span="6">直线长度</a-col>
        <a-col :span="18">
          <a-input-number
            :min="10"
            :max="999"
            style="width: 100%"
            :precision="0"
            :value="globalGridAttr.nodeWidth"
            @change="onNodeWidthChange"
          ></a-input-number>
        </a-col>
      </a-row>
      <a-row align="middle">
        <a-col :span="6">虚线</a-col>
        <a-col :span="16">
          <a-slider
            :min="0"
            :max="6"
            :step="1"
            :value="globalGridAttr.strokeDasharray"
            @change="onStrokeDasharrayChange"
          />
        </a-col>
        <a-col :span="2">
          <div class="result">{{ globalGridAttr.strokeDasharray }}</div>
        </a-col>
      </a-row>
      <a-row align="middle">
        <a-col :span="6">开启链接</a-col>
        <a-col :span="16">
          <a-switch
            :value="globalGridAttr.magnet"
            @change="onMagnetChange"
            checked-children="是"
            un-checked-children="否"
          />
        </a-col>
      </a-row>
    </template>
  </div>
</template>

<script>
import { nodeOpt } from './method'

export default {
  name: 'Index',
  props: {
    globalGridAttr: {
      type: Object,
      default: null,
      require: true
    },
    id: {
      type: String,
      default: null,
      require: true
    }
  },
  data() {
    return {
      curCel: '',
      timer: 0,
      marks: { 0: 0, 45: '', 90: 90, 135: '', 180: 180, 225: '', 270: 270, 315: '', 360: 360 }
    }
  },
  computed: {
    nodeIdCpt() {
      return {
        id: this.id
      }
    },
    showText() {
      return this.curCel && ['html', 'text-block'].includes(this.curCel.shape)
    },
    showHeight() {
      return !this.curCel || this.curCel.attr('data/showHeight') !== false
    }
  },
  watch: {
    nodeIdCpt: {
      handler(nv) {
        this.curCel = nodeOpt(nv, this.globalGridAttr)
        console.log(this.curCel)
      },
      immediate: false,
      deep: false
    }
  },
  methods: {
    onStrokeWidthChange(val) {
      this.globalGridAttr.nodeStrokeWidth = val
      this.curCel.attr('body/strokeWidth', val)
    },
    onFontSizeChange(val) {
      this.globalGridAttr.nodeFontSize = val
      this.curCel.attr('text/fontSize', val)
    },
    onColorChange(val) {
      // const val = e.target.value
      this.globalGridAttr.nodeFontColor = val
      this.curCel.attr('text/fill', val)
    },
    onUsersChange(e) {
      const val = e.target.value
      this.globalGridAttr.nodeUsers = val
      this.curCel.attr('approve/users', val)
    },
    onNodeWidthChange(val) {
      if (!val && val !== 0) {
        return
      }
      this.globalGridAttr.nodeWidth = val
      this.curCel.resize(val, this.globalGridAttr.nodeHeight)
      this.curCel.attr('data/width', val)
    },
    onStrokeDasharrayChange(val) {
      this.globalGridAttr.strokeDasharray = val
      if (this.shapeType === 'edge') {
        this.curCell.attr('line/strokeDasharray', val)
      }
      if (this.shapeType === 'double-edge') {
        this.curCell.attr('outline/strokeDasharray', val)
      }
    },
    onMagnetChange(bool) {
      this.globalGridAttr.magnet = bool
      this.curCel.attr('body/magnet', bool)
    },
    onNodeHeightChange(val) {
      if (!val && val !== 0) {
        return
      }
      this.globalGridAttr.nodeHeight = val
      this.curCel.resize(this.globalGridAttr.nodeWidth, val)
      this.curCel.attr('data/height', val)
    },
    onNodeAngleChange(val) {
      this.globalGridAttr.nodeAngle = val
      const curCel = this.curCel
      const preAngle = curCel.attr('data/angle')
      const diffAngle = val - preAngle
      curCel.rotate(diffAngle)
      curCel.attr('data/angle', val)
    }
  }
}
</script>

<style lang="less" scoped>
@import '../style.less';
</style>
